<template>
  <div class="media-list">
    <div v-for="(item, idx) in list" :key="idx" class="media-thumb" @click="openPreview(idx)">
      <img v-if="item.type === 'image'" :src="item.url" class="thumb-img" />
      <div v-else-if="item.type === 'video'" class="thumb-video">
        <video :src="item.url" class="thumb-img" muted />
        <span class="video-icon">▶</span>
      </div>
    </div>
    <el-dialog v-model="preview.visible" width="50%" :show-close="true" append-to-body>
      <div v-if="preview.current" class="preview-content">
        <img v-if="preview.current.type === 'image'" :src="preview.current.url" class="preview-media" />
        <video v-else-if="preview.current.type === 'video'" :src="preview.current.url" controls class="preview-media" ref="previewVideo" />
        <div class="media-list-preview-bar">
          <div v-for="(item, idx) in list" :key="idx" class="preview-thumb" :class="{ active: idx === preview.index }" @click="openPreview(idx)">
            <img v-if="item.type === 'image'" :src="item.url" />
            <video v-else-if="item.type === 'video'" :src="item.url" muted />
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "MediaList",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      preview: {
        visible: false,
        index: 0,
        current: null,
      },
    };
  },
  watch: {
    'preview.visible'(newVal) {
      if (!newVal) {
        // 当弹窗关闭时，暂停所有视频
        this.pauseAllVideos();
      }
    }
  },
  methods: {
    openPreview(idx) {
      this.preview.index = idx;
      this.preview.current = this.list[idx];
      this.preview.visible = true;
      this.$emit("preview", this.list[idx]);
    },
    pauseAllVideos() {
      // 暂停预览视频
      if (this.$refs.previewVideo) {
        this.$refs.previewVideo.pause();
      }

      // 暂停所有缩略图视频
      this.$nextTick(() => {
        const videos = this.$el.querySelectorAll('video');
        videos.forEach(video => {
          video.pause();
          video.currentTime = 0;
        });
      });
    },
  },
};
</script>

<style scoped>
.media-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.media-thumb {
  width: 48px;
  height: 48px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb-video {
  position: relative;
  width: 100%;
  height: 100%;
}

.video-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
}

.preview-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.preview-media {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
}

.media-list-preview-bar {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  overflow-x: auto;
  justify-content: center;
}

.preview-thumb {
  width: 40px;
  height: 40px;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}

.preview-thumb.active {
  border-color: #409EFF;
}

.preview-thumb img,
.preview-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>